<template>
  <view>
    <view class="padding-top-30 bg-white">
      <view class="padding-40 text-center">
        <text class="text-48 color-t1 text-bold">车企认证</text>
      </view>
      <view class="margin-top-20 padding-lr-80">
        <view class="flex-row justify-between relative padding-bottom-30">
          <view class="line" />
          <view v-for="(val,key) in items" :key="key" class="item relative flex-column flex-center">
            <view class="number margin-bottom-10 flex-row flex-center">
              <text class="text-28" :class="['color-' + (key === items.length - 1 ? 'primary' : 'white' )]">{{ key+1 }}</text>
            </view>
            <text class="text-28 color-t1">{{ val }}</text>
          </view>
        </view>
      </view>
      <view class="padding-lr-30">
        <view class="padding-tb-30 border-top">
          <text class="text-24 color-t3">资料审核中，审核结果会以短信方式通知您。</text>
        </view>
      </view>
    </view>
    <view class="padding-lr-30 margin-top-30">
      <tui-button @click="back">返回首页</tui-button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CertStatus',
  data() {
    return {
      items: ['完善信息', '平台审核', '审核完成']
    }
  },
  methods: {
    back() {
      this.jump()
    }
  }
}
</script>

<style scoped lang="scss">
@include setPadding(lr,80);

.number{
  width:60rpx;
  height:60rpx;
  border-radius:50%;
  background: $color-primary;
  border:2rpx solid $color-primary
}
.item{
  z-index:10;
}
.item:last-child .number{
  background:#ffffff;
  border-color: $color-border;
}
.line{
  @include position(absolute,30rpx,40rpx,$left:40rpx);
  border-bottom:2rpx solid $color-border;
  z-index:2;
}
.border-top{
  border-top:2rpx solid $color-border;
}
</style>
